<template>
  <el-dialog
    :visible.sync="modals"
    scrollable
    :title="title"
    class="order_box"
    :closable="false"
    :mask-closable="false"
  >
    <el-form ref="formValidate" :label-width="80" @submit.native.prevent>
      <el-form-item label="取消原因：" prop="remark">
        <el-input
          v-model="cancel_reason"
          :maxlength="200"
          show-word-limit
          :autosize="{minRows:3,maxRows:3}"
          type="textarea"
          placeholder="请输入取消原因"
          style="width: 100%"
        />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="cancel()">关闭</el-button>
      <el-button type="primary" @click="putSend()">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getOrderInfoApi, cancelOrderApi } from '@/api/onsite';
export default {
  name: 'orderCancel',
  data() {
    return {
      title: '订单取消',
      cancel_reason: '',
      modals: false,
      send_locked: false,
    };
  },
  props: {
    orderId: Number,
  },
  methods: {
    // 订单详情
    getOrderInfo() {
      getOrderInfoApi(this.orderId)
        .then(async (res) => {
          this.order_info = res;
          this.title = '订单取消：' + this.order_info.ordersn;
        })
    },
    cancel(name) {
      this.modals = false;
      this.reset();
    },
    reset() {
      this.cancel_reason = '';
    },
    putSend() {
      if (this.send_locked) {
        return this.$message.error('请勿重复提交');
      }
      let data = {
        id: this.orderId,
        cancelReason: this.cancel_reason,
      };
      this.send_locked = true;
      cancelOrderApi(data)
        .then(async (res) => {
          this.send_locked = false;
          this.modals = false;
          this.reset();
          this.$message.success('操作成功');
          this.$emit('submitOk');
        })
        .catch((res) => {
          this.send_locked = false;
          this.$message.error('操作失败');
        });
    },
  },
};
</script>

<style scoped lang="stylus"></style>
